<template>
  <div class="container">
    <Header />
    <Swipe />
    <Nav />
    <Goods :phones="phoneData" />
  </div>
</template>

<script setup>
import Header from "./components/Header.vue";
import Swipe from "./components/Swipe.vue";
import Nav from "./components/Nav.vue";
import Goods from "../../components/Goods.vue";
import { computed } from "vue";
import { usePhoneStore } from "@/stores/phone";
const phoneStore = usePhoneStore();
const phoneData = computed(() => phoneStore.phones);
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: auto;
  background-color: #eee;
}
</style>
